<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>axios基本使用</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.min.js"></script>
    </head>
    <body>
        <button>点击发送 GET 请求</button>
        <button>点击发送 POST 请求</button>
        <button>简便写法</button>

        <script>
            //获取按钮
            let btns = document.querySelectorAll("button");

            let d = {a: 100,b: 200};

            btns[0].onclick = async function () {
                //函数使用形式 参数是一个对象, 称之为『配置对象』
                // URL 传参  查询字符串
                //async 和 await
                try {
                    let result = await axios({
                        //方法
                        method: "get",
                        //url
                        url: "http://127.0.0.1:8090/server",
                        //params 属性
                        params: {
                            g: 700,
                            h: 800
                        },
                        //设置请求头
                        headers: {
                            a: 100,
                            b: 200,
                        },
                    });

                    console.log(result);
                } catch (e) {
                    console.dir(e);
                }
            };
        
            btns[1].onclick = async function(){
                //发送 post 类型请求
                let result = await axios({
                    method: 'post',
                    url: 'http://127.0.0.1:8090/server',
                    //设置请求体
                    // JSON 
                    // data: {
                    //     a: 100,
                    //     b: 200
                    // }
                    //querystring 形式
                    // data: 'c=300&d=400'
                });

                console.log(result);
            }
        
            btns[2].onclick = async function(){
                //如果请求类型为 get, 简便写法
                let result = await axios('http://127.0.0.1:8090/server');
                console.log(result);
            }
        </script>
    </body>
</html>
